<template>
        <el-dialog v-model="dialogVisible" title="门店选择器" width="30%" style="min-width: 300px;
    max-width: 500px;
    " draggable>

        <el-scrollbar style="max-height: 500px;" ref="scrollbar">

            <div
            @click="toSelect({
                id: null,
                name: '所有门店',
            })"
            >
                <div class="card-box">
                    <div class="card-title">所有门店</div>
                </div>
                <div style="height: 10px;"></div>
            </div>

            <div v-for="(item, index) in bodyData.content"
            @click="toSelect(item)"
            >

                <div class="card-box">
                    <div class="card-title">{{ item.name }}</div>
                    <div class="card-content">{{ item.address }}</div>
                </div>

                <div class="card-btns" style="text-align: right;">

                    <el-button type="text" size="mini" @click="toView(item)">
                        查看详情
                    </el-button>


                    <el-button type="text" size="mini" @click="toSave(item)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                    </el-button>

                    <el-button type="text" size="mini" style="color: red;">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </div>

                <div style="height: 10px;"></div>

            </div>
        </el-scrollbar>

    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineExpose } from 'vue';
import $kt from '@/vueKantboot';

let emits = defineEmits(['select']);

let dialogVisible = ref(false);

let open = (param: any) => {
    dialogVisible.value = true;
}

defineExpose({
    open,
})

let dialogOfSave = ref();
let dialogOfView = ref();

let toSave = (param: any) => {
    dialogOfSave.value.open(param);
}

let toView = (param: any) => {
    dialogOfView.value.open(param);
}

let toSelect = (res: any) => {
    emits("select", res);
    dialogVisible.value = false;
}

let requestParam = ref({
    data: {
        id: "",
        name: "",
        code: "",
    },
    pageNumber: 1,
    pageSize: 30,
});

let isTop = ref(true);

let bodyData = ref({
    totalElements: 0,
    content: [
        {
            "address": "北京路1号楼1号大街",
            "area": null,
            "enableStatus": null,
            "gmtCreate": null,
            "gmtModified": null,
            "gmtOpen": null,
            "id": 1,
            "name": "1号街店",
            "phone": null,
            "typeCode": null
        }
    ]
});



let pageChange = (val: any) => {
    requestParam.value.pageNumber = val;
}


let getBodyData = async () => {
    await $kt.request.request({
        url: "/business-goods-web/admin/goodsStore/getBodyData",
        method: "post",
        data: requestParam.value,
    }).then((res: any) => {
        bodyData.value = res.data.data;
    })
}

getBodyData();

</script>

<style lang="scss" scoped>
.card-header {}

.card-box {
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 10px;
    text-align: center;

    .card-title {
        font-size: 16px;
        margin-bottom: 10px;
        text-align: center;
    }

    .card-content {
        font-size: 10px;
        color: #999;
        text-align: center;
    }

}

.card-box:hover {
    // 变小
    transform: scale(0.95);
}

.card-box:active {
    // 变小
    transform: scale(0.9);
}
</style>
